<template>
	<view class="top_up">
		<view class="refund">
			<p>账户余额(元)</p>
			<view>
				<p><span>￥</span>{{money||'0.00'}}</p>
				<!-- <button @click="skip('/pages/user/list/withdrawal/withdrawal')">提现</button> -->
			</view>
		</view>
		<view class="sum">
			<view :class="{'view':num==50}" @click="select(50)">50<span>元</span></view>
			<view :class="{'view':num==100}" @click="select(100)">100<span>元</span></view>
			<view :class="{'view':num==200}" @click="select(200)">200<span>元</span></view>
			<view :class="{'view':num==300}" @click="select(300)">300<span>元</span></view>
			<view :class="{'view':num==500}" @click="select(500)">500<span>元</span></view>
			<view :class="{'view':num==1000}" @click="select(1000)">1000<span>元</span></view>
		</view>
		<input type="number" @input="input" v-model="num1" placeholder="自定义充值金额">
		<button @click="submit">提交</button>
		<p @click="skip('/pages/user/list/record/record')">记录</p>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				num1: '',
				money: 0
			};
		},
		onLoad(res) {
			this.money = res.money
			console.log(this.money)
		},
		watch: {
			num1: function(val, onl) {
				// console.log(val,onl)
				this.num1 = val
			}
		},
		methods: {
			scroll(e) {
				console.log(e)
			},
			select(num) {
				this.num = num
				this.num1 = ''
			},
			skip(url) {
				uni.navigateTo({
					url,
				})
			},
			input() {
				this.num = 0
				this.num1 = String(Math.floor(this.num1))
				setTimeout(() => {
					this.num1 = Math.floor(this.num1)
				}, )
			},
			submit() {
				this.$httpRequest('/order/createRechargeOrder', {
					amount: this.num || this.num1
				}).then(data => {
					this.$httpRequest('/pay/rechargePay', {
						order_sn: data.data
					}).then(res => {
						function onBridgeReady() {
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
									"appId": res.data.appId, //公众号ID，由商户传入     
									"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
									"nonceStr": res.data.nonceStr, //随机串     
									"package": res.data.package,
									"signType": "RSA", //微信签名方式：     
									"paySign": res.data.paySign, //微信签名 
								},
								function(res) {
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										uni.switchTab({
											url:'/pages/user/user'
										})
									}
								});
						}
						if (typeof WeixinJSBridge == "undefined") {
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
								document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
							}
						} else {
							onBridgeReady();
						}
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.top_up {
		padding-top: 20rpx;

		&>p {
			font-size: 15px;
			color: #A8A8A8;
			text-align: center;
			margin-top: 40rpx;
		}

		&>button {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background: #5FC07B;
			font-size: 15px;
			margin-top: 80rpx;
		}

		&>input {
			width: 690rpx;
			height: 88rpx;
			background: #fff;
			border-radius: 10rpx;
			margin: 20rpx auto;
			text-align: center;
		}

		&>.sum {
			width: 690rpx;
			margin: 0 auto 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			&>.view {
				color: #3B7933;
				border: 1px solid #3B7933;
				background: #7CDB9B;
			}

			&>view {
				width: 216rpx;
				height: 120rpx;
				text-align: center;
				line-height: 120rpx;
				font-size: 18px;
				margin-bottom: 20rpx;
				border: 1px solid #999999;
				border-radius: 10rpx;

				&>span {
					font-size: 12px;
				}
			}
		}

		&>.refund {
			width: 690rpx;
			height: 216rpx;
			border-radius: 20rpx;
			background: linear-gradient(138deg, #535353 0%, #292929 100%);
			margin: 0 auto 20rpx;
			padding: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;

			&>view {
				width: 100%;
				height: 118rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;

				&>p {
					font-size: 18px;

					&>span {
						font-size: 10px;
					}
				}

				&>button {
					width: 180rpx;
					height: 54rpx;
					border-radius: 24rpx;
					line-height: 54rpx;
					font-size: 12px;
					background: #646464;
					color: #333;
					margin: 0;
				}
			}

			&>p {
				width: 100%;
				font-size: 12px;
				color: #999999;
				height: 72rpx;
				border-bottom: 1px solid #606060;
				display: flex;
				align-items: center;
			}
		}
	}
</style>